<template>
  <div class="details-container">
    <el-steps :active="progress" align-center>
      <el-step title="提交订单" :description="handlerTime(orderDetails.createTime)"></el-step>
      <el-step title="支付订单"></el-step>
      <el-step title="平台发货"></el-step>
      <el-step title="确认收货"></el-step>
      <el-step title="完成评价"></el-step>
    </el-steps>
    <div class="orderInfo-centent out-border">
      <div class="info-title danger-color d-flex justify-content-between">
        <div><i class="el-icon-warning icon-size" style="margin: 0 5px 0 20px"></i> <span>当前订单状态: 已发货</span></div>
        <div>
          <el-button size="mini">订单跟踪</el-button>
          <el-button size="mini">发送站内信</el-button>
          <el-button size="mini" style="margin-right: 20px">备注订单</el-button>
        </div>
      </div>
      <div>
        <div class="info-item">
          <i class=""></i>
          <span>基本信息</span>
        </div>
        <div class="table-layout">
          <el-row class="d-flex flex-wrap">
            <el-col :span="4" v-for="(item, i) in this.basic_info" :key="i" class="">
              <div class="grid-content bg-purple col-width">{{ item.label }}</div>
              <div class="show overflow-hidden">{{ orderDetails[item.prop] }}</div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div>
        <div class="info-item">
          <i class=""></i>
          <span>收货人信息</span>
        </div>
        <div class="table-layout">
          <el-row class="d-flex flex-wrap">
            <el-col :span="6" v-for="(item, i) in this.person_info" :key="i" class="">
              <div class="grid-content bg-purple col-width">{{ item.label }}</div>
              <div class="show overflow-hidden">{{ orderDetails[item.prop] }}</div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div>
        <div class="info-item">
          <i class=""></i>
          <span>商品信息</span>
        </div>
        <div class="">
          <el-table :data="this.orderDetails.orderItemList" border style="width: 100%">
            <el-table-column prop="date" label="商品图片" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.productPic" alt="" width="100px" />
              </template>
            </el-table-column>
            <el-table-column prop="date" label="商品名称" align="center">
              <template v-slot="scope">
                <div>{{ scope.row.productName }}</div>
                <div>品牌：{{ scope.row.productBrand }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="价格/货号" align="center">
              <template v-slot="scope">
                <div>价格：{{ scope.row.productPrice }}</div>
                <div>货号{{ scope.row.productSn }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="属性" align="center">
              <template v-slot="scope">
                <span v-for="(item, i) in JSON.parse(scope.row.productAttr)" :key="i">{{ item.key }}:{{ item.value }};</span>
              </template></el-table-column
            >
            <el-table-column prop="productQuantity" label="数量" align="center"> </el-table-column>
            <el-table-column prop="date" label="小计" align="center">
              <template slot-scope="scope"> ￥{{ scope.row.productPrice }} </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="m-3 d-inline-block">
          合计：<span class="danger-color">￥{{ this.orderDetails.totalAmount }}</span>
        </div>
      </div>
      <div>
        <div class="info-item">
          <i class=""></i>
          <span>费用信息</span>
        </div>
        <div>
          <el-row class="d-flex flex-wrap">
            <el-col :span="6" v-for="(item, i) in this.cost_info" :key="i" class="">
              <div class="grid-content bg-purple col-width">{{ item.label }}</div>
              <div class="show overflow-hidden">￥{{ orderDetails[item.prop] }}</div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div>
        <div class="info-item">
          <i class=""></i>
          <span>费用信息</span>
        </div>
        <div class="table-layout">
          <el-table :data="orderDetails.historyList" border style="width: 100%">
            <el-table-column prop="operateMan" label="操作者" width="180" align="center"> </el-table-column>
            <el-table-column label="操作时间" width="180" align="center">
              <template v-slot="scope">
                {{ handlerTime(scope.row.createTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="" label="订单状态" align="center">
              <template v-slot="scope">
                <span v-if="scope.row.orderStatus == 4">已关闭</span>
              </template>
            </el-table-column>
            <el-table-column label="付款状态" align="center">
              <template>
                <span>已退款</span>
              </template>
            </el-table-column>
            <el-table-column label="发货状态" align="center">
              <template>
                <span>已发货</span>
              </template>
            </el-table-column>
            <el-table-column prop="note" label="备注" align="center"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { fetchCheckOrder } from '@/api/api'
import { mkfsTime } from '@/utils/utils'
export default {
  name: 'OrderDetails',
  data() {
    return {
      orderDetails: [],
      progress: 0,
      basic_info: [
        { prop: 'orderSn', label: '订单编号' },
        { prop: 'deliverySn', label: '发货单流水号' },
        { prop: 'memberUsername', label: '用户账号' },
        { prop: 'payType', label: '支付方式' },
        { prop: 'sourceType ', label: '订单来源' },
        { prop: 'orderType', label: '订单类型' },
        { prop: 'deliveryCompany ', label: '配送方式' },
        { prop: 'deliverySn', label: '物流单号' },
        { prop: 'autoConfirmDay', label: '自动确认收货时间' },
        { prop: 'integration', label: '订单可得优币' },
        { prop: 'integration', label: '订单可得成长值' },
        { prop: 'promotionInfo', label: '活动信息' },
      ],
      person_info: [
        { prop: 'receiverName', label: '收货人' },
        { prop: 'receiverPhone', label: '手机号码' },
        { prop: 'receiverPostCode', label: '邮政编码' },
        { prop: 'receiverProvince', label: '收货地址' },
        // ['receiverProvince', 'receiverCity', 'receiverRegion', 'receiverDetailAddress']
      ],
      cost_info: [
        {
          prop: 'totalAmount',
          label: '商品合计',
        },
        {
          prop: 'freightAmount',
          label: '运费',
        },
        {
          prop: 'couponAmount',
          label: '优惠券',
        },
        {
          prop: 'integrationAmount',
          label: '积分抵扣',
        },
        {
          prop: 'promotionAmount',
          label: '活动优惠',
        },
        {
          prop: 'discountAmount',
          label: '折扣金额',
        },
        {
          prop: 'totalAmount',
          label: '订单总金额',
        },
        {
          prop: 'totalAmount',
          label: '应付款金额',
        },
      ],
    }
  },
  methods: {
    async getRouterId() {
      const id = this.$route.query.id
      let res = await fetchCheckOrder(id)
      console.log(res.data)
      this.orderDetails = res.data
    },
    handlerTime(time) {
      return mkfsTime(time)
    },
    tableHeaderStyle({ rowIndex }) {
      if (rowIndex == 0) {
        return 'background:#f2f6fc'
      }
    },
    handerConsignee(info) {},
  },
  created() {
    this.getRouterId()
    this.handlerTime()
  },
}
</script>
<style lang="scss" scoped>
.details-container {
  width: 80%;
  padding: 20px;
  margin: 20px auto;
}
.orderInfo-centent {
  padding: 20px;
}
.info-title {
  background: #f2f6fc;
  margin: -20px -20px 0;
  height: 80px;
  line-height: 80px;
}
.danger-color {
  color: #f56c6c;
}
.icon-size {
  font-size: 18px;
}
.info-item {
  padding: 20px 0;
}
.table-layout {
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
}
.bg-purple-dark {
  background: #f2f6fc;
}
.bg-purple {
  background: #f2f6fc;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.col-width {
  padding: 10px;
  text-align: center;
}
.show {
  height: 52px;
  padding: 15px 10px;
  border-bottom: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
}
.info-item {
  color: #606266;
}
</style>
